<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>打卡中心</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <style>
        html,body{
            height:100%;
			text-align:center
        }
        .info{
            width:26rem;
        }
		#container{
			height:50%;
			width:95%;
			margin:0 auto;
		}
		#distance{
			margin:10px;
		
			font-size: 12px;
		}
		#time{
			font-size:16px;
			color:#1e9fff;
			font-weight:bold;
			margin:10px;
		}
		#signbtn{
			margin:10px auto;
			width:130px;
			height:130px;
			border-radius:50%;
			box-shadow:0px 0px 8px #25a4ff;
			font-size: 20px;
		}
		#signbtn1{
			margin:10px auto;
			width:100px;
			height:100px;
			border-radius:50%;
			box-shadow:0px 0px 8px #25a4ff;
			font-size: 20px;
		}
   /*     #left{*/
   /*         margin:1px auto;*/
   /*         width:50px;*/
			/*height:50px;*/
			/*border-radius:50%;*/
			/*box-shadow:0px 0px 20px #25a4ff;*/
			/*font-size: 10px;*/
   /*     }*/
		#place{
			margin:5px auto;
			height:20px;
			color:#ffffff;
			width:80px;
			font-size: 12px;
			padding-top: 1px;
		}
		.isdiy{
			background-color:#5fb878 ;
		}
		.nodiy{
			background-color:#ff5722 ;
		}
		.layui-form-switch{
			width: -5%;
			height: 20%;
			background-color: #ff5722;
			margin: 5px 0;

		}
		.layui-form-onswitch{
			background-color: #009688;
			
		}
		.layui-form-switch em{
			color: #ffffff!important;
		}
		#box{
			position: fixed;
			bottom: 0;
			margin:10px auto;
			width: 100%;
		}
		.ct {
		    margin: 0;
		}
		#history{
			text-align: left;
			margin: 10px auto;
			width: 100%;
			display: flex;            
	        display: -webkit-flex;            
	        justify-content: center;            
	        align-items: center;      
		}
		.layui-timeline-item {
		    position: relative;
		    padding-bottom: 5px;
		}
		.layui-text {
		    line-height: 15px;
		    font-size: 14px;
		    color: #666;
		}
		#weizhi{
			margin-top: -8px;
			display: block;
			color: #009f95;
			font-size: 11px;
		}
		.signtype{
			color: orange;
			font-style:normal;
		}
		#location{
			font-size: 12px;
		}
    </style>
	<body >
		
		<div id='container'></div>
		<div class="info">
			<h4 id='status'></h4><hr>
			<p id='result'></p><hr>
		</div>
	

	<div id="box">
		<div id='time'>因仑班</div>
		<div id='time1'></div>
		<div style="float:left">
			<button id='signbtn1' class="layui-btn layui-btn-normal" onclick="register()">注册</button><br>
		</div>
		<div style="float:right" >
			<button id='signbtn1' class="layui-btn layui-btn-normal" onclick="myFunc()">查询</button><br>
		</div>
		<div style="float:center" class="ct">
			<button id='signbtn' class="layui-btn layui-btn-normal" onclick="myFunc()">考勤签到</button><br>
		</div>
		<!--<button id='signbtn' class="layui-btn layui-btn-normal" onclick="myFunc()">考勤签到</button><br>-->
		<!--<button id='signbtn' class="left" onclick="myFunc()">注册</button><br>-->
		<!--<img src="https://acg.loli.ma/acgurl.php" height="100">-->
		<div id="place" type="button" class="layui-btn-radius">非办公地点</div>
		<div id='distance'>系统正在定位中</div>
		<div id='location'>系统正在定位中</div>
	</div>	
	<input type="hidden" id="isonoff" name="isonoff" value="true">
	<input type="hidden" id="userid" name="userid" value="0">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="./layui/layui.js"></script>
	<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5f55be10ebe760ee9d0975163d894771"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=5f55be10ebe760ee9d0975163d894771&plugin=AMap.CircleEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<script type="text/javascript">
	    test= "";
	    test1="";
	    test2="";
	    pc = "";
	    
		var map = new AMap.Map('container', {
			resizeEnable: true
		});
		function httpPost(URL, PARAMS) {
             var temp = document.createElement("form");
             temp.action = URL;
             temp.method = "post";
             temp.style.display = "none";
             
             for (var x in PARAMS) {
              var opt = document.createElement("textarea");
            //   alert(x);
              opt.name = x;
              opt.value = PARAMS[x];
              temp.appendChild(opt);
             }
             
             
             document.body.appendChild(temp);
             temp.submit();
             
             return temp;
} 
		  function myFunc() { 
          // document.getElementById('status').innerHTML='定位成功'
// 			var str = {};
// 			str.list=data.position;
// 			str.test=data.location_type
            var params = {
            "lng":test,
            "lat":test1,
            "stress":test2
        };
        //alert(test);
        httpPost("index.php", params);
        //  window.location.href="https://sys.lcy.pub/index.php?lng="+test+'&lat='+test1+'&stress='+test2
         } 
         function register(){
             window.location.href="register.html"
         }
         function register(){
             window.location.href="login.html"
         }
		AMap.plugin('AMap.Geolocation', function() {
			var geolocation = new AMap.Geolocation({
				enableHighAccuracy: true,//是否使用高精度定位，默认:true
				timeout: 10000,          //超过10秒后停止定位，默认：5s
				buttonPosition:'RB',    //定位按钮的停靠位置
				buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

			});
			map.addControl(geolocation);
			geolocation.getCurrentPosition(function(status,result){
				if(status=='complete'){
					onComplete(result)
					var str1 = result;
				}else{
					onError(result)
				}
			});
		});
		//解析定位结果
		function onComplete(data) {
			document.getElementById('status').innerHTML='定位成功'
			var str = [];
			//alert(data.position.lng);
			str.push('定位结果：' + data.position);
			str.push('定位类别：' + data.location_type);
			if(data.accuracy){
				 str.push('精度：' + data.accuracy + ' 米');
			}//如为IP精确定位结果则没有精度信息
			str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
			document.getElementById('result').innerHTML = str.join('<br>');
		
			getposition = [data.position.lng,data.position.lat];//获取当前位置的经纬度
			test =  data.position.lng;
			test1 = data.position.lat;
			test2 = data.formattedAddress;
			//alert(test);
			var location = data.formattedAddress;//具体街道位置信息
			console.log(getposition);
			
			var shanghaizone = [ 112.003363   ,27.711106];//设置的签到点
			//计算当前位置与考勤点距离
			var distance = AMap.GeometryUtil.distance(getposition,shanghaizone).toFixed(0);
		
			console.log(distance);
			//document.getElementById('distance').innerHTML = distancestr;
			var setDistance = 1000;//设定的打卡距离
	        pc = distance
			document.getElementById('location').innerHTML=location;
	
			var distancestr = '仍距'+distance+'米';
			console.log(distance);
			document.getElementById('time1').innerHTML = '<b>距离签到点'+pc+'米'+'</b>';
			//alert(distance);
			//document.write("<td>"+distance+" 距离</td>");
			if (distance <= setDistance) {
				//在范围内
				document.getElementById('distance').innerHTML = '</i><i class="layui-icon layui-icon-face-smile" style="font-size:12px; color:#17bc84;">  你已进入考勤范围  </i>  ';
				document.getElementById("place").innerHTML="办公地点 ";
				$("#place").addClass("isdiy");
           
            } else {
				//不在范围内
				document.getElementById('distance').innerHTML = '<i class="layui-icon layui-icon-face-cry" style="font-size: 10px; color:red;">  未进入考勤范围 </i><a style="color:#29a6ff" onClick="window.location.reload()">重新定位 </a> ';
           		document.getElementById("place").innerHTML="非办公地点 ";
           		$("#place").addClass("nodiy");
            }
 			//window.location.href="http://qdapi.lcy.pub/index.php?name="+data.position.lng;
			$("#signbtn").click(function(){
			
				if(distance<=setDistance){
					layer.msg("实验室内打卡");
				}else{
					layer.msg("不在打卡点");
				}
				 
		});


			//绘制签到范围
			var circle = new AMap.Circle({
				center: shanghaizone,
				radius: 800, //半径
				borderWeight: 1,
				strokeOpacity: 1,
				strokeOpacity: 0.2,
				fillOpacity: 0.4,
			})

			circle.setMap(map)
			// 缩放地图到合适的视野级别
			map.setFitView([ circle ])
			var circleEditor = new AMap.CircleEditor(map, circle)
		}
		//解析定位错误信息
		function onError(data) {
			document.getElementById('location').innerHTML='定位失败';
			document.getElementById('location').innerHTML = '失败原因排查信息:'+data.message;
		}
	</script>
	 <script>
        setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
        now = new Date(),hour = now.getHours(); 
        //alert(hour);
		if(hour>12){ 
			$("#defshow").html(' <input id="shangxiaban" type="checkbox" name="close" lay-filter="switchTest" lay-skin="switch" lay-text="上班签到|下班签退">');
			 $("#isonoff").val(false);
		}
		
		
    </script>
</body>
</html>
